import React from 'react'
import { Image, StyleSheet, TextInput, View } from 'react-native'
import ImageButton from '../../../widgets/ImageButton'
import { px2dp } from 'rn-xiaobu-utils'

export default class BaseInput extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      icon: '', // 输入框图标
      placeholder: '', // 输入提示
      keyboardType: 'default', // 弹起键盘类型：default,numeric,email-address
      isSecure: false, // 是否是密码
      showEye: false, // 是否展示可视按钮
      clickEye: '', // 可视按钮是否被点击
      eyeStyle: {}, // 可视按钮的样式
      showDelete: 'none', // 展示清除按钮
      value: '' // 输入框文本
    }
  }

  // 输入框内容改变触发的方法
  _inputValueChange = text => {
    if (text.length > 0) {
      this.setState({ showDelete: 'flex' })
    } else {
      this.setState({ showDelete: 'none' })
    }
    this.setState({ value: text })
  }

  // 清空输入框
  _clearInputText = () => {
    this.refs.input.clear()
    this._inputValueChange('')
  }

  // 格式检验
  _validText = () => {
    return new Promise()
  }

  // 点击眼睛
  _eyePress = () => {
    let eyeState = !this.state.clickEye
    this.setState({ clickEye: eyeState })
    this.setState({ isSecure: !eyeState })
    let eyeStyle = eyeState ? { tintColor: '#28acff' } : {}
    this.setState({ eyeStyle: eyeStyle })
  }

  render() {
    let eyeIcon = this.state.showEye ? (
      <ImageButton
        source={require('../../../../assets/img/login/eye.png')}
        style={{ ...styles.eyeicon, ...this.state.eyeStyle }}
        onPress={this._eyePress}
      />
    ) : null
    return (
      <View style={styles.inputcontainer}>
        <Image source={this.state.icon} style={styles.icon}/>
        <TextInput
          ref="input"
          style={styles.logininput}
          secureTextEntry={this.state.isSecure}
          keyboardType={this.state.keyboardType}
          placeholder={this.state.placeholder}
          placeholderTextColor="#cccccc"
          onChangeText={this._inputValueChange}
          value={this.state.value}
        />
        <ImageButton
          source={require('../../../../assets/img/login/delete.png')}
          style={{ ...styles.icon, display: this.state.showDelete }}
          onPress={this._clearInputText}
        />
        {eyeIcon}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  inputcontainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: px2dp(690),
    height: px2dp(118),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderBottomWidth: px2dp(1),
    // borderBottomWidth: StyleSheet.hairlineWidth,
    marginTop: px2dp(30)
  },
  icon: {
    width: px2dp(60),
    height: px2dp(60)
  },
  logininput: {
    flex: 1,
    height: px2dp(80),
    fontSize: px2dp(32),
    marginLeft: px2dp(26),
    marginRight: px2dp(26),
    padding: 0
  },
  eyeicon: {
    width: px2dp(60),
    height: px2dp(60),
    marginLeft: px2dp(10)
  }
})
